import React from 'react';
import { Layout, Menu, Dropdown, message, Modal, Icon } from 'antd';
import screenfull from 'screenfull'
import EditPassModal from '../EditPassModal'
import './index.scss'
import headImg from '../../assets/img/head.png'
import SetDefaultSystemModal from '../../privateModules/ms-react-setDefaultSystemModal'
import {postData} from '../../api/index'

const { Header} = Layout;
const confirm = Modal.confirm;

class HeaderComponent extends React.Component {
  state = {
    originOrgType: 0,//0-自营旧机构；1-新机构
    icon: 'arrows-alt',
    editModalData:{
      status:false
    },
    userName:''
  }
  onDropClick = ({ key }) => {
    switch(key){
      case 'edit':
        //修改密码
        this.setState({
          editModalData:{
            status:true
          }
        })
        break
      case 'refresh':
        //清除缓存
        confirm({
          title: '清除缓存?',
          content: '确定清除缓存',
          onOk:()=> {
            window.location.reload();
          },
        });
        break
      case 'logout':
        //退出登录
        confirm({
          title: '退出登录?',
          content: '确定是否要退出登录',
          onOk:()=> {
            this.props.onCheckLogOutStatus({});
          },
        });
        break
      case 'setDefaultSystem':
        break
    }
  };

  componentWillMount(){
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    if(userInfo){
      this.setState({
        userName:userInfo.id,
        originOrgType:userInfo.originOrgType
      })
    }    
  }

  componentDidMount () {
    screenfull.onchange(() => {
      this.setState({
        icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
      })
    })
  }  

  componentWillReceiveProps(newProps){
    if(newProps.editPasswordStatus != this.props.editPasswordStatus){
      message.success('修改成功');
      this.setState({
        editModalData:{
          status:false
        }
      })       
    }
  }

  screenfullToggle = () => {
    if (screenfull.enabled) {
      screenfull.toggle()
    }
  }  

  handleEditPass = (type,value) => {    
    if(type == 'close'){    
      this.setState({
        editModalData:{
          status:false
        }
      })    
    }else{
      this.props.onCheckEditPasswordStatus({
        passwd:value
      })
    }
  }

  render() {    
    const state = this.state;
    const {icon} = this.state;
    return (
      <Header className="header">
        <Icon type={icon} className="screenfullIcon" onClick={this.screenfullToggle}/>  
        <Dropdown overlay={
          <Menu onClick={this.onDropClick}>
            <Menu.Item key="edit">
              <a>修改密码</a>
            </Menu.Item>
            <Menu.Item key="refresh"> 
              <a>刷新缓存</a>
            </Menu.Item>            
            {/* 设置默认系统模态框 */}
            {this.state.originOrgType?<Menu.Item key="setDefaultSystem"> 
              <SetDefaultSystemModal Modal={Modal} message={message} postData={postData} postDomainName={`${process.env.Text[3]}/center`}></SetDefaultSystemModal>
            </Menu.Item>:''}
            <Menu.Item key="logout"> 
              <a>退出登录</a>
            </Menu.Item>
          </Menu>}
          trigger={['click']}>        
          <div className="fr">
            <img src={headImg} alt=""/>
            <a className="ant-dropdown-link" href="#">{ state.userName }</a>
          </div>
        </Dropdown>
        {/*修改密码弹窗 */}
        <EditPassModal editModalData={this.state.editModalData} onHandleSubmit={this.handleEditPass}/>
      </Header>
    );
  }
}

export default HeaderComponent;